import { useState } from "react";
import "./App.css";

function MyButton({ count, updateCount }) {
  return <button onClick={updateCount}>clicked {count} times</button>;
}

function App() {
    /* 
      
      1. 数据是固定不变的，状态是变化的数据；
      2. 组件内通过useState()来创建状态，该方法返回值能够解构出状态和更新状态的方法
      3. 状态在页面能够响应式变化，useState可以传入一个值，也可以传入一个函数，若传入参数，则他的值是上一次的值
    */
  const [count, setCount] = useState(0);
  return (
    <>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
      </div>
      <h2>条件渲染</h2>
      <ul>{listsItems}</ul>
    </>
  );
}

export default App;
